<template>
	<base-popup
		:modelValue="modelValue"
		:closable="false"
		is-go-back
		@go-back="onClose"
		class="bank-card-select">
		<template #title>
			<div class="title">
				{{ $t('wallet.bankCardSelect') }}
			</div>
		</template>
		<div v-for="item in cards" :key="item.id" class="w-full">
			<div
				class="w-full flex justify-between items-center border-b-[1px] border-[var(--color-border-1)]">
				<div
					class="flex flex-1 items-center cursor-pointer min-h-[64px] py-[5px] px-[18px]"
					@click.stop="onSelect(item)">
					<base-image class="h-[38px] aspect-square" :src="item.bankIcon" type="server" />
					<div class="w-full ml-[15px]">
						<div class="text-[var(--color-text-1)]">{{ item.bankName }}</div>
						<div class="mt-[3px] text-sm text-[var(--color-text-3)] break-words">
							{{ item.cardNumber }}
							<base-copy class="ml-1" :value="item.cardNumber" />
						</div>
					</div>
				</div>
				<div class="pr-5">
					<base-button
						square
						type="warning"
						:text="$t('action.remove')"
						style="height: 100%"
						@click="onRemove(item.id)">
						<base-icon name="close" class="text-[12px]" />
					</base-button>
				</div>
			</div>
		</div>
		<div class="mt-[27px] mx-[28px] mb-[40px]">
			<base-button icon="plus" block round @click="handleAddCard">
				{{ $t('wallet.bankCardAdd') }}
			</base-button>
		</div>
	</base-popup>

	<bank-card-add />
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { removeCard } from '@/api/wallet'
import { t, showError, showSuccess } from '@/utils'
import { useWalletStore } from '@/store'
import { BasePopup, BaseImage, BaseCopy, BaseButton, BaseIcon } from '@/components/base'
import BankCardAdd from '@/views/wallet/bank-card-add/index.vue'
import { useDialog } from '@/hooks/useDialog.ts'

defineProps({
	modelValue: {
		type: Boolean,
		required: true
	}
})

const emits = defineEmits(['update:modelValue', 'select'])
const { warning } = useDialog()
const walletStore = useWalletStore()
const cards = computed(() => walletStore.cards)

// const router = useRouter()
const handleAddCard = () => {
	walletStore.setWalletBankCardSelectPopupShow(true)
}
const onSelect = (item: any) => {
	emits('select', item)
	onClose()
}

const onRemove = async (id: any) => {
	if (cards.value.length === 1) {
		// showFailToast({
		// 	message: t('httpCode[150]')
		// })
		console.log(t('httpCode[150]'))
		return false
	}
	// let loading
	try {
		// loading = showLoading()
		// await removeCard({ id })
		// // loading.close()
		// showSuccess(t('wallet.bankCardRemoveSuccess'))
		// // list.value.splice(list.value.indexOf(list.value.filter((obj) => obj.id === id)))
		// await walletStore.getAllCards()
		// onClose()
		warning({
			content: 'wallet withdraw removeCard!!!!',
			confirmFn: async () => {
				try {
					await removeCard({ id })
					showSuccess(t('wallet.bankCardRemoveSuccess'))
					await walletStore.getAllCards()
				} catch (error: any) {
					showError(error)
				}
			}
		})
	} catch (error: any) {
		// loading.close()
		showError(error)
	}
}

const onClose = () => {
	emits('update:modelValue', false)
}
</script>
<style lang="scss" scoped>
.bank-card-select .n-button {
	background-color: transparent;
}
</style>
